<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>allChat</title>
    <!--jquery-emoji-->
    <link rel="stylesheet" href="/public/allChat/emoji/lib/css/jquery.mCustomScrollbar.min.css" />
    <link rel="stylesheet" href="/public/allChat/emoji/src/css/jquery.emoji.css" />
    <link href="/public/allChat/plus/css/jquery.popuplayer.css" rel="stylesheet">
    <link href="/public/allChat/plus/css/blower-loading.css" rel="stylesheet">
    <script>
        window.jQuery || document.write('<script src="/public/allChat/emoji/lib/script/jquery.min.js"><\/script>')
    </script>
<link href="/public/dist/css/vendors.bundle-b14c20160e2d47c455e9.css" rel="stylesheet"><link href="/public/dist/css/common.bundle-b14c20160e2d47c455e9.css" rel="stylesheet"><link href="/public/dist/css/allChat.bundle-b14c20160e2d47c455e9.css" rel="stylesheet"></head>

<div id="loadingWrap">
    <div id="loadingContainer">
        <div class="loadingbar">
            <div class="marker_container">
                <div class="marker"></div>
                <div class="marker"></div>
                <div class="marker"></div>
                <div class="marker"></div>
            </div>
            <div class="filler_wrapper">
                <div class="filler">
                    <span class="value">waiting...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<body>
    <% if(UIBackground == "0" ){ %>
        <link href="/public/allChat/css/cloud-background.css" rel="stylesheet">
        <style>
            .sky{
                width: 100vw;
                height: 100vh;
                position: absolute;
                z-index: -999;
                /* color: #007fd5; */
            }
        </style>
        <div id="background" class="sky">
            <div class="clouds_one"></div>
            <div class="clouds_two"></div>
            <div class="clouds_three"></div>
        </div>
    <% }else{ %>
        <script src='/public/allChat/plus/js/prefixfree.min.js'></script>
        <style class="cp-pen-styles">
            #background {
                width: 100vw;
                height: 100vh;
                position: absolute;
                z-index: -999;
                background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
                background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
                background-attachment: fixed;
                overflow: hidden;
            }
            .wallCtr{
                color:#fa6855;
            }
            /*#count{
                background-image: none;
            }*/
            #liveSubtitle > div{
                background: rgba(0, 191, 255,0.3);
            }
            #w-message > div > div{
                border-radius: 5px;
                padding: 12px;
                background: rgba(0, 191, 255,0.3);
            }
            @keyframes rotate {
            0% {
                transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
            }
            100% {
                transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
            }
            }
            .stars {
            transform: perspective(500px);
            transform-style: preserve-3d;
            position: absolute;
            bottom: 0;
            perspective-origin: 50% 100%;
            left: 50%;
            animation: rotate 90s infinite linear;
            }

            .star {
            width: 2px;
            height: 2px;
            background: #F7F7B6;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0 -300px;
            transform: translate3d(0, 0, -300px);
            backface-visibility: hidden;
            }
        </style>
        <div id="background">
            <div class="stars"></div>
        </div>
        <script src='/public/allChat/plus/js/stopExecutionOnTimeout.js?t=1'></script>
        <script>
            $(document).ready(function () {
                var stars = 800;
                var $stars = $('.stars');
                var r = 800;
                for (var i = 0; i < stars; i++) {
                    if (window.CP.shouldStopExecution(1)) {
                        break;
                    }
                    var $star = $('<div/>').addClass('star');
                    $stars.append($star);
                }
                window.CP.exitedLoop(1);
                $('.star').each(function () {
                    var cur = $(this);
                    var s = 0.2 + Math.random() * 1;
                    var curR = r + Math.random() * 300;
                    cur.css({
                        transformOrigin: '0 0 ' + curR + 'px',
                        transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')'
                    });
                });
            });
        </script>
    <% } %>

    <div class="body" oncontextmenu="return false;" style="height:100vh">
        <header id="header">
            <img src="<%= avatar %>" alt="<%= userid%>" title="<%= userid%>">
            <span>allChat</span>
        </header>

        <div class="list-group" id="listPanel" onselectstart="return false;"></div>

        <div class="input-group" id="inputBox">
            <span class="input-group-btn">
                <div id="plusBtnWrap">
                    <button class="btn btn-default" id="emojiBtn" type="button">😊</button>
                    <button class="btn btn-default" id="plusBtn" type="button">➕</button>
                </div>
            </span>
            <!--<input type="text" class="form-control" id="inputText" placeholder="Search for...">-->
            <div contenteditable="true" class="form-control" id="inputText"></div>

            <span class="input-group-btn">
                <button class="btn btn-default" id="sendBtn" type="button">Go!</button>
            </span>
        </div>

        <div id="plusPanel">
            <label for="chooseImage">
                <i class="fa fa-photo" id="showImageBtn" aria-hidden="true"><span>图片</span></i>
            </label>
            <input id="chooseImage" type="file" style="display:none;">
            <label>
                <i class="fa fa-bar-chart" id="voteShow" aria-hidden="true"><span>投票</span></i>
            </label>
        </div>

        <div id="notification"></div>
    </div>
    <div class="infoMenuWrap">
        <div id="accordion">

        </div>
    </div>
    <!--jquery-emoji require start-->
    <!--(Optional) the js for jquery.mCustomScrollbar's addon-->
    <script src="/public/allChat/emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
    <!--the js for jquery.mCustomScrollbar-->
    <script src="/public/allChat/emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
    <!--the js for this plugin-->
    <script src="/public/allChat/emoji/src/js/jquery.emoji.js"></script>
    <!--jquery-emoji require end-->
    <script src="/public/allChat/js/myLoading.js"></script>
    <script src="/public/allChat/js/myTouchEvent.js"></script>
    <script>
        $("#inputText").emoji({
            button: "#emojiBtn",
            showTab: true,
            animation: 'slide',
            icons: [{
                    name: "QQ表情",
                    path: "/public/allChat/emoji/src/img/qq/",
                    maxNum: 91,
                    excludeNums: [41, 45, 54],
                    file: ".gif",
                    placeholder: "#qq_{alias}#"
                }, {
                    name: "bilibili小电视",
                    path: "/public/allChat/emoji/src/img/bilibili_tv/",
                    maxNum: 24,
                    file: ".jpg",
                    placeholder: "#tv_{alias}#"
                }, {
                    name: "贴吧表情",
                    path: "/public/allChat/emoji/src/img/tieba/",
                    maxNum: 50,
                    file: ".jpg",
                    placeholder: "#tieba_{alias}#"
                }, {
                    name: "sticker",
                    path: "/public/allChat/emoji/src/img/sticker/",
                    maxNum: 23,
                    excludeNums: [1, 2],
                    file: ".png",
                    placeholder: "#sticker_{alias}#"
                },
                {
                    name: "其他",
                    path: "/public/allChat/emoji/src/img/other/",
                    maxNum: 7,
                    file: ".gif",
                    placeholder: "#other_{alias}#"
                }
            ]
        }).on("input propertychange", function () {
            var height = $(this)[0].clientHeight,
                minHeight = parseInt($(this).css("minHeight"));
            var innerHtml = $(this).html();
            var breakLine = innerHtml.match(/\<div\>|\<br\>/g);
            breakLine = breakLine == null ? 0 : breakLine;
            if (height > minHeight) {
                $("#sendBtn").css("height", height);
                $("#emojiBtn").css("height", height);
                $("#listPanel").css("height", "calc(100vh - 40px - " + height + "px)");
                $("#listPanel").animate({
                    scrollTop: $("#listPanel")[0].scrollHeight - $("#listPanel")[0].clientHeight
                }, 300);
            } else if (height < minHeight || breakLine < 1) {
                height = minHeight;
                $("#sendBtn").css("height", height);
                $("#emojiBtn").css("height", height);
                $("#listPanel").css("height", "calc(100vh - 40px - " + height + "px)");
            }
            if (breakLine < 1) {
                height = minHeight;
                $("#sendBtn").css("height", height);
                $("#emojiBtn").css("height", height);
                $("#listPanel").css("height", "calc(100vh - 40px - " + height + "px)");
            }
        })
        $("#emojiBtn").click(function (event) {
            setTimeout(function () {
                $(".emoji_container").css({
                    top: "",
                    bottom: $("#emojiBtn").css("height")
                });
            }, 1);
        })
    </script>
<script type="text/javascript" src="/public/dist/js/vendors.b14c20160e2d47c455e9.bundle.js"></script><script type="text/javascript" src="/public/dist/js/common.b14c20160e2d47c455e9.bundle.js"></script><script type="text/javascript" src="/public/dist/js/allChat.b14c20160e2d47c455e9.bundle.js"></script></body>

</html>